<template>
  <div class="tool-bar">
    <div class="bar-control">
      <el-button type="primary" class="el-icon-plus addBtn" @click="click('create')">新建</el-button>
      <el-button class="el-icon-refresh" @click="click('refresh')">刷新</el-button>
    </div>
    <div class="bar-cond">
      <template v-for="condItem in items">
        <div v-if="condItem.type==='select'" :key="condItem.key" :class="{'bar-cond-item': true, 'bar-cond-width': condItem.limitWidth,'next-line': condItem.nextLine}">
          <el-select
            v-model="_cond[condItem.key]"
            filterable
            remote
            clearable
            reserve-keyword
            :allow-create="condItem.allowCreate"
            :multiple="condItem.multiple"
            :collapse-tags="condItem.collapse"
            :placeholder="condItem.placeholder"
            :remote-method="condItem.remote"
            :loading="loading"
          >
            <el-option
              v-for="item in options[condItem.option]"
              :key="item.value !== undefined? item.value: item"
              :label="item.label !== undefined? item.label: item"
              :value="item.value !== undefined? item.value: item"
            />
          </el-select>
        </div>
        <div v-if="condItem.type==='date-piker'" :key="condItem.key" class="bar-cond-item">
          <el-date-picker
            v-model="_cond[condItem.key]"
            value-format="timestamp"
            type="datetimerange"
            :start-placeholder="`${condItem.placeholder}起`"
            :end-placeholder="`${condItem.placeholder}止`"
            :default-time="['00:00:00']"
          />
        </div>
        <div v-if="condItem.type==='input'" :key="condItem.key" :class="{'bar-cond-item': true, 'bar-cond-width': condItem.limitWidth,'next-line': condItem.nextLine}">
          <el-input v-model="_cond[condItem.key]" clearable :placeholder="condItem.placeholder" />
        </div>
      </template>
      <div class="bar-cond-item">
        <el-button icon="el-icon-search" @click="click('search')">搜索</el-button>
      </div>
    </div>
  </div>

</template>
<script>
import fota from '../../api/fota'

export default {
  props: {
    'cond': {
      type: Object,
      default: function() {
        return { timeRange: [] }
      }
    }
  },
  data() {
    return {
      loading: false,
      items: [],
      options: {
        type: [{ value: '1', label: '测试任务' }, { value: '2', label: '前线任务' }]
      }
    }
  },
  computed: {
    _cond: {
      get: function() {
        return this.cond
      },
      set: function(val) {
        this.$emit('update:cond', val)
      }
    }
  },
  created() {
    this.items = [
      { key: 'name', placeholder: '计划名称', remote: this.loadPlanName, option: 'plans', allowCreate: true, limitWidth: true, type: 'select' },
      { key: 'type', placeholder: '计划类型', option: 'type', onClear: 'type', limitWidth: true, type: 'select' },
      { key: 'product', placeholder: '产品名称', remote: this.loadProduct, option: 'products', limitWidth: true, type: 'select' },
      { key: 'srcV', placeholder: '当前版本', remote: this.loadVersions, option: 'versions', limitWidth: true, type: 'select' },
      { key: 'dstV', placeholder: '目标版本', remote: this.loadVersions, option: 'versions', limitWidth: true, type: 'select' },
      { key: 'owner', placeholder: '所属用户', limitWidth: true, type: 'input' },
      { key: 'timeRange', placeholder: '创建时间', type: 'date-piker' }
    ]
  },
  mounted() {
  },
  methods: {
    loadPlanName: function(val) {
      this.loading = true
      const self = this
      if (val !== undefined && val.trim() !== '') {
        fota.queryPlanNames(val).then(resp => {
          self.options['plans'] = resp.data
          this.loading = false
        }, error => {
          fota.notifyError(`查询升级计划失败${error.message}`)
          this.loading = false
        })
      }
    },
    loadProduct: function(val) {
      this.loading = true
      const self = this
      if (val !== undefined && val.trim() !== '') {
        fota.queryProducts(val).then(resp => {
          self.options['products'] = resp.data
          this.loading = false
        }, () => {
          fota.notifyError(`查询产品列表失败！`)
          this.loading = false
        })
      }
    },
    loadVersions: function(val) {
      this.loading = true
      const self = this
      if (val !== undefined && val.trim() !== '') {
        const product = this.cond.product === undefined || this.cond.product.trim() === '' ? 'ALL' : this.cond.product
        fota.queryVersions(product, val).then(resp => {
          self.options['versions'] = resp.data
          this.loading = false
        }, () => {
          fota.notifyError(`查询产品版本列表失败！`)
          this.loading = false
        })
      }
    },
    click: function(val) {
      this.$emit(val)
    }
  }
}
</script>
<style scoped>
  .tool-bar {
    float: left;
    margin: 0 8px 8px 0;
  }

  .bar-control {
    margin: 0 8px 8px 0;
  }

  .bar-cond {
    float: left;
  }

  .bar-cond-item {
    float: left;
  }

  .bar-cond-width {
    width: 10%;
  }

  /deep/ .bar-cond-item .el-input__inner {
    border-radius: 0;
  }
</style>
